<template>
    <div id="sucaiList">
        <div class="sucaiList_content">
            <h3 class="sucaiList_content_title">素材列表</h3>
            <div class="tableBox">
                <!-- <span class="pageTotal">（在当前条件下筛选共123条）</span> -->
                <!-- <div class="pageSize">
                    每页显示条数
                    <el-select
                    v-model="page.size"
                    placeholder="请选择"
                    >
                    <el-option
                        v-for="item in page.pageSize"
                        :key="item"
                        :label="item"
                        :value="item"
                    >
                    </el-option>
                    </el-select>
                </div> -->
                <!-- <el-input
                class="filterInput"
                    placeholder="输入关键字在结果中搜索"
                    prefix-icon="el-icon-search"
                    v-model="page.filterText"
                >
                </el-input> -->
                <!-- <el-button class="filterBtn" type="primary">搜索</el-button> -->
                <div class="tableBtnGroup">
                    <!-- <el-button size="mini" icon="">全选</el-button> -->
                    <el-checkbox v-model="allChecked">全选</el-checkbox>
                    <el-button size="mini" icon="">删除</el-button>
                    <el-button size="mini" icon="">从收藏夹导入</el-button>
                </div>
                <div class="tableBtnGroup-right">
                    <span class="joinNumber">已加入99条</span>
                    <el-button type="success" size="mini" class="visibilyBtn generateReport">生成简报</el-button>
                    <el-button type="success" size="mini" class="visibilyBtn">隐藏摘要</el-button>
                </div>
                
                <el-table
                    ref="multipleTable"
                    :data="tableData"
                    tooltip-effect="dark"
                    style="width: 100%"
                    @selection-change="handleSelectionChange"
                >
                    <el-table-column
                    type="selection"
                    width="35"
                    >
                    </el-table-column>
                    <el-table-column label="全选本页">
                    <template slot-scope="scope">
                        <div class="newsBox">
                        <h3 class="newsTitle">{{scope.row.title}}</h3>
                        <!-- <span
                            class="isRead"
                            :class="scope.row.readed=='0'? '':'noRead'"
                        >{{scope.row.readed=='0'? '已读':'未读'}}</span> -->
                        <div class="newsContent">{{scope.row.content}}</div>
                        <span class="newsTime">{{scope.row.publishTime}}</span>
                        <span class="newsResource">文章来源：{{scope.row.articleRessource}}</span>
                        <span class="newsTrigger">触发关键词：{{scope.row.triggerKey}}</span>
                        </div>
                        <div class="newsRelevant">
                            <span class="rele">相关舆情{{scope.row.total}}条</span>
                            <a href="#">查看原文</a><br>
                            <span class="newsBtn news_copy">取消收藏</span>
                            <span class="newsBtn news_warn" style="margin-left: 40px">删除</span><br>
                            <el-select
                                size="small"
                                width="100px"
                                v-model="scope.row.view"
                                placeholder="请选择"
                            >
                                <el-option
                                v-for="item in scope.row.viewOption"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"
                                >
                                </el-option>
                            </el-select>
                        </div>
                    </template>
                    </el-table-column>
                </el-table>
                <el-pagination
                    @size-change="handleSizeChange"
                    background
                    @current-change="handleCurrentChange"
                    :current-page="page.currentPage"
                    :page-sizes="page.pageSize"
                    :page-size="page.size"
                    layout="prev, pager, next"
                    :total="page.total"
                >
                </el-pagination>
            </div>
        </div>
    </div>
</template>
<script>
import '../../assets/css/sucaiList.css'
export default {
    data(){
        return{
            tableData: [
                {
                title: "下周开始，襄阳这类交通工具将集中整治！",
                content:
                    "如果没有记错的话，当初武汉发生疫情，也正是武汉如果没有记错的话，当初武汉发生疫情，也正是武汉开了两会之后出现的，而这次北京又如此巧合，发生在两如果没有记错的话，当初武汉发生疫情，也正是武汉开了两会之后出现的，而这次北京又如此巧合，发生在两开了两会之后出现的，而这次北京又如此巧合，发生在两会开完后，究竟有什么关联和偶发呢 ​",
                publishTime: "2019-03-12 09:12:00",
                readed: "0",
                articleRessource: "搜狐网",
                triggerKey: "疫情/两会/武汉",
                total: "10",
                view: "0",
                viewOption: [
                    { value: "0", label: "正面" },
                    { value: "1", label: "中立" },
                    { value: "2", label: "负面" }
                ]
                },
                {
                title: "下周开始，襄阳这类交通工具将集中整治！",
                content:
                    "如果没有记错的话，当初武汉发生疫情，也正是武汉开了两会之后出现的，错的话，当初武汉发生疫情，也正是武汉开了两会之后出现的，而这次北京又如此巧错的话，当初武汉发生疫情，也正是武汉开了两会之后出现的，而这次北京又如此巧而这次北京又如此巧合，发生在两会开完后，究竟有什么关联和偶发呢 ​",
                publishTime: "2019-03-12 09:12:00",
                readed: "1",
                articleRessource: "搜狐网",
                triggerKey: "疫情/两会/武汉",
                total: "10",
                view: "0",
                viewOption: [
                    { value: "0", label: "正面" },
                    { value: "1", label: "中立" },
                    { value: "2", label: "负面" }
                ]
                },{
                title: "下周开始，襄阳这类交通工具将集中整治！",
                content:
                    "如果没有记错的话，当初武汉发生疫情，也正是武汉开了两会之后出现的，错的话，当初武汉发生疫情，也正是武汉开了两会之后出现的，而这次北京又如此巧错的话，当初武汉发生疫情，也正是武汉开了两会之后出现的，而这次北京又如此巧而这次北京又如此巧合，发生在两会开完后，究竟有什么关联和偶发呢 ​",
                publishTime: "2019-03-12 09:12:00",
                readed: "1",
                articleRessource: "搜狐网",
                triggerKey: "疫情/两会/武汉",
                total: "10",
                view: "0",
                viewOption: [
                    { value: "0", label: "正面" },
                    { value: "1", label: "中立" },
                    { value: "2", label: "负面" }
                ]
                },{
                title: "下周开始，襄阳这类交通工具将集中整治！",
                content:
                    "如果没有记错的话，当初武汉发生疫情，也正是武汉开了两会之后出现的，错的话，当初武汉发生疫情，也正是武汉开了两会之后出现的，而这次北京又如此巧错的话，当初武汉发生疫情，也正是武汉开了两会之后出现的，而这次北京又如此巧而这次北京又如此巧合，发生在两会开完后，究竟有什么关联和偶发呢 ​",
                publishTime: "2019-03-12 09:12:00",
                readed: "1",
                articleRessource: "搜狐网",
                triggerKey: "疫情/两会/武汉",
                total: "10",
                view: "0",
                viewOption: [
                    { value: "0", label: "正面" },
                    { value: "1", label: "中立" },
                    { value: "2", label: "负面" }
                ]
                },{
                title: "下周开始，襄阳这类交通工具将集中整治！",
                content:
                    "如果没有记错的话，当初武汉发生疫情，也正是武汉开了两会之后出现的，错的话，当初武汉发生疫情，也正是武汉开了两会之后出现的，而这次北京又如此巧错的话，当初武汉发生疫情，也正是武汉开了两会之后出现的，而这次北京又如此巧而这次北京又如此巧合，发生在两会开完后，究竟有什么关联和偶发呢 ​",
                publishTime: "2019-03-12 09:12:00",
                readed: "1",
                articleRessource: "搜狐网",
                triggerKey: "疫情/两会/武汉",
                total: "10",
                view: "0",
                viewOption: [
                    { value: "0", label: "正面" },
                    { value: "1", label: "中立" },
                    { value: "2", label: "负面" }
                ]
                },{
                title: "下周开始，襄阳这类交通工具将集中整治！",
                content:
                    "如果没有记错的话，当初武汉发生疫情，也正是武汉开了两会之后出现的，错的话，当初武汉发生疫情，也正是武汉开了两会之后出现的，而这次北京又如此巧错的话，当初武汉发生疫情，也正是武汉开了两会之后出现的，而这次北京又如此巧而这次北京又如此巧合，发生在两会开完后，究竟有什么关联和偶发呢 ​",
                publishTime: "2019-03-12 09:12:00",
                readed: "1",
                articleRessource: "搜狐网",
                triggerKey: "疫情/两会/武汉",
                total: "10",
                view: "0",
                viewOption: [
                    { value: "0", label: "正面" },
                    { value: "1", label: "中立" },
                    { value: "2", label: "负面" }
                ]
                },{
                title: "下周开始，襄阳这类交通工具将集中整治！",
                content:
                    "如果没有记错的话，当初武汉发生疫情，也正是武汉开了两会之后出现的，错的话，当初武汉发生疫情，也正是武汉开了两会之后出现的，而这次北京又如此巧错的话，当初武汉发生疫情，也正是武汉开了两会之后出现的，而这次北京又如此巧而这次北京又如此巧合，发生在两会开完后，究竟有什么关联和偶发呢 ​",
                publishTime: "2019-03-12 09:12:00",
                readed: "1",
                articleRessource: "搜狐网",
                triggerKey: "疫情/两会/武汉",
                total: "10",
                view: "0",
                viewOption: [
                    { value: "0", label: "正面" },
                    { value: "1", label: "中立" },
                    { value: "2", label: "负面" }
                ]
                },{
                title: "下周开始，襄阳这类交通工具将集中整治！",
                content:
                    "如果没有记错的话，当初武汉发生疫情，也正是武汉开了两会之后出现的，错的话，当初武汉发生疫情，也正是武汉开了两会之后出现的，而这次北京又如此巧错的话，当初武汉发生疫情，也正是武汉开了两会之后出现的，而这次北京又如此巧而这次北京又如此巧合，发生在两会开完后，究竟有什么关联和偶发呢 ​",
                publishTime: "2019-03-12 09:12:00",
                readed: "1",
                articleRessource: "搜狐网",
                triggerKey: "疫情/两会/武汉",
                total: "10",
                view: "0",
                viewOption: [
                    { value: "0", label: "正面" },
                    { value: "1", label: "中立" },
                    { value: "2", label: "负面" }
                ]
                },{
                title: "下周开始，襄阳这类交通工具将集中整治！",
                content:
                    "如果没有记错的话，当初武汉发生疫情，也正是武汉开了两会之后出现的，错的话，当初武汉发生疫情，也正是武汉开了两会之后出现的，而这次北京又如此巧错的话，当初武汉发生疫情，也正是武汉开了两会之后出现的，而这次北京又如此巧而这次北京又如此巧合，发生在两会开完后，究竟有什么关联和偶发呢 ​",
                publishTime: "2019-03-12 09:12:00",
                readed: "1",
                articleRessource: "搜狐网",
                triggerKey: "疫情/两会/武汉",
                total: "10",
                view: "0",
                viewOption: [
                    { value: "0", label: "正面" },
                    { value: "1", label: "中立" },
                    { value: "2", label: "负面" }
                ]
                },{
                title: "下周开始，襄阳这类交通工具将集中整治！",
                content:
                    "如果没有记错的话，当初武汉发生疫情，也正是武汉开了两会之后出现的，错的话，当初武汉发生疫情，也正是武汉开了两会之后出现的，而这次北京又如此巧错的话，当初武汉发生疫情，也正是武汉开了两会之后出现的，而这次北京又如此巧而这次北京又如此巧合，发生在两会开完后，究竟有什么关联和偶发呢 ​",
                publishTime: "2019-03-12 09:12:00",
                readed: "1",
                articleRessource: "搜狐网",
                triggerKey: "疫情/两会/武汉",
                total: "10",
                view: "0",
                viewOption: [
                    { value: "0", label: "正面" },
                    { value: "1", label: "中立" },
                    { value: "2", label: "负面" }
                ]
                }
            ],
            page: {
                filterText: "",
                currentPage: 1,
                pageSize: [10, 20, 30, 50, 100],
                size: 10,
                total: 100
            },
            allChecked: false
        }
    }
}
</script>